<!--
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2020/09/16 03:27:36
  @file: navItem.vue
  @description:
  ==================
  递归导航组件
  css 方面 ：每一层级别的导航的类名都附带 数字标号
            采用如下的方式布局，目前不支持slot插槽 你可以在一项数据中增加一个class属性传入 这样可以拥有专属类名
  ```js
  ul{
    a{}
    li{
      ul{....}
    }
  }
  ```
  数据方面：一个数组，里面是每一个导航项的文字和 链接，外部传入的专属类名，每一项可以传入专属类名，假如是后端获取的数据
          最好不要加入专有类名。否则不能保证数据的干净
  ==================
  @link [Github](https://github.com/shanliangdeYWJ)
-->
<template>
  <ul class="nav-item" :class="'nav-item'+num">
    <!--                                                     如果客户自定义类名存在，则将类名前面加上一个空格加上，否则为空 -->
    <li v-for="(item, index) in lists" :key="index" class="item-box" :class="'item-box'+num+(item.class?' '+item.class:'')">
      <router-link :to="path + item.path+''" :class="item.class">{{item.name}}</router-link>
      <!-- 判断子路由是否存在，如果存在则 将 子路由数据 传入 另外将父级的路径传入以/结尾 当做和子级路由的分隔符号 -->
      <menu-item v-if="item.children" :lists="item.children" :path="path + item.path+'/'" :num="num+1"></menu-item>
    </li>
  </ul>
</template>

<script>

export default {
  name: 'MenuItem',
  props: {
    // 当不传递 根路径的时候，默认会有一个根路径值
    path: { type: String, default: '/' },
    lists: { type: Array, required: true },
    num: { type: Number, default: 1 }
  },
  data () {
    return {};
  }
};
</script>

<style lang='scss' scoped>
</style>
